<template>
  <ul class="contextMenu --el-box-shadow-dark" v-if="modelValue" :style="{top:clientY+'px',left:clientX+20+'px'}"
      v-click-outside="cancel">
    <li>新增菜单</li>
    <li>编辑菜单</li>
    <li>删除菜单</li>
  </ul>
</template>

<script>
import { toRefs } from 'vue'
import ClickOutside from 'element-plus'

export default {
  name: 'contextMenu',
  directives: { ClickOutside },
  setup (props, { emit }) {
    console.log(props)
    const cancel = () => {
      debugger
      // emit('update:modelValue', false)
    }
    const { modelValue } = toRefs(props)
    console.log(modelValue)
    return {
      cancel
    }
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    clientX: {
      type: Number,
      default: 0
    },
    clientY: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="less">
.contextMenu {
  width: 200px;
  position: fixed;
  z-index: 1;
  background: #fff;
}
</style>
